<template>
    <div>
        <!-- 三级分类商品分类列表 -->
        <Category :scene="scene"></Category>
        <!-- 场景0 -->
        <el-card v-show="scene == 0" shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
            <!-- 添加属性按钮 -->
            <el-button type="primary" size="default" :icon="Plus" @click="addAttr" :disabled="!categoryStore.C3Id">添加属性
            </el-button>
            <!-- table表格 -->
            <el-table border style="margin:10px 0;" :data="attrStore.attrList">
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="属性名称" width="160" prop="attrName"></el-table-column>
                <el-table-column label="属性值列表">
                    <template #="{row,$index}">
                        <el-tag class="ml-2" type="success" v-for="(attrVal,index) in row.attrValueList"
                            style="margin-right:10px">{{attrVal.valueName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160">
                    <template #="{row,$index}">
                        <el-button type="warning" size="small" :icon="Edit" @click="updateAttr(row)"></el-button>
                        <el-button type="danger" size="small" :icon="Delete" @click="removeAttr(row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-card>
        <!-- 场景1 -->
        <el-card v-show="scene != 0" shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0;">
            <el-form inline>
                <el-form-item label="属性名">
                    <el-input v-model="attrParams.attrName" placeholder="请输入属性名字" clearable @change=""></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="default" :icon="Plus" @click="addAttrValue"
                :disabled="attrParams.attrName.length?false:true">添加属性值</el-button>
            <el-button size="default" @click="cancel">取消</el-button>
            <el-table border stripe style="margin:10px 0;" :data="attrParams.attrValueList">
                <el-table-column label="序号" width="80" align="center" type="index"></el-table-column>
                <el-table-column label="属性值">
                    <template #="{row,$index}">
                        <el-input v-if="row.flag" :ref="(vc)=>(inputArr[$index]=vc)" v-model="row.valueName"
                            placeholder="请输入属性值名称" size="small" clearable @blur="toLook(row,$index)">
                        </el-input>
                        <div v-else @click="toEdit(row,$index)">{{row.valueName}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #="{row,$index}">
                        <el-button type="danger" size="small" @click="attrParams.attrValueList.splice($index,1)"
                            :icon="Delete"></el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" size="default" @click="save"
                :disabled="attrParams.attrValueList.length?false:true">保存
            </el-button>
            <el-button size="default" @click="cancel">取消</el-button>
        </el-card>

    </div>
</template>

<script setup lang="ts">
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus
} from '@element-plus/icons-vue'
import useAttrStore from '@/stores/attr';
import useCategoryStore from '@/stores/category';
import { reqAddOrUpdateAttr,reqDeleteAttr } from '@/api/product/attr/attr'
import { nextTick, reactive, ref,onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import { cloneDeep } from 'lodash-es';
let attrStore = useAttrStore()
let categoryStore = useCategoryStore()
// 定义切换场景的响应式数据
let scene = ref<number>(0)

// 添加或修改需要的参数
let attrParams = reactive({
    attrName: '',
    attrValueList: [],
    categoryId: categoryStore.C3Id,
    categoryLevel: 3
})

// 给每一个添加的属性值做标记
let flag = ref<boolean>(false)

//定义一个input实例对象数组
let inputArr = ref([])

// 点击添加属性按钮
const addAttr = () => {
    // 切换场景
    scene.value = 1
    // 清空数据
    Object.assign(attrParams, {
        attrName: '',
        attrValueList: [],
        categoryId: categoryStore.C3Id,
        categoryLevel: 3
    })
}
// 点击取消按钮 两个
const cancel = () => {
    scene.value = 0
}

// 点击添加属性值按钮
const addAttrValue = () => {
    attrParams.attrValueList.push({
        valueName: '',
        flag: true
    })

    nextTick(() => {
        inputArr.value[attrParams.attrValueList.length - 1].focus()
    })
}

// 切换查看模式
const toLook = (row, $index) => {

    // 如果输入的内容为空 提示清除
    if (row.valueName.trim() == '') {
        ElMessage({
            type: 'warning',
            message: '属性名字不能为空'
        })
        attrParams.attrValueList.splice($index, 1)
        return
    }
    // 如果输入的内容是重复的
    let repeat = attrParams.attrValueList.find((item) => {
        if (row != item) {
            return row.valueName === item.valueName
        }
        return
    })
    if (repeat) {
        ElMessage({
            type: 'warning',
            message: `${repeat.valueName}重复`
        })
        // 把重复的删除
        attrParams.attrValueList.splice($index, 1)
        return
    }
    row.flag = false
}

// 点击切换修改模式
const toEdit = (row, $index) => {
    row.flag = true
    // 聚焦
    console.log(inputArr);
    nextTick(() => {
        inputArr.value[$index].focus()
    })
}

// 点击保存按钮
const save = async () => {
    try {
        await reqAddOrUpdateAttr(attrParams)
        scene.value = 0
        ElMessage({
            type:'success',
            message:attrParams.id?'修改成功':'添加成功'
        })
        attrStore.getAttrList()
    } catch (error) {
        ElMessage({
            type:'error',
            message:attrParams.id?'修改失败':'添加失败'
        })
    }
}

// 点击修改按钮
const updateAttr = (row)=>{
    scene.value = 1
    // 获取数据
    Object.assign(attrParams,cloneDeep(row))
}

// 点击删除按钮
const removeAttr =async (row) =>{
   try {
    await reqDeleteAttr(row.id)
    ElMessage({
        type:'success',
        message:`删除${row.attrName}成功`
    })
    attrStore.getAttrList()
   } catch (error) {
    ElMessage({
        type:'error',
        message:`删除${row.attrName}失败`
    })
   }
}

onUnmounted(()=>{
    categoryStore.C1Id = ''
    categoryStore.C2Id = ''
    categoryStore.C3Id = ''
    categoryStore.C1List = ''
    categoryStore.C2List = ''
    categoryStore.C3LIst = ''
})
</script>

<style scoped>

</style>